<template>
	<view class="">
		<view class="" v-if="inputVal<=0" @click.stop="plus">
			<nmr-icon name="jiatianjia-yuankuang" v-if="startSaleNum&&startSaleNum==1" :size="size" color="#47A848"></nmr-icon>
			<view  class="plus-box" v-else>
				<!-- <text class="fs30">+</text> -->
				<u-icon name="plus"></u-icon>
				{{startSaleNum}}{{saleUnit}}起批
			</view>
			
		</view>
		<view class="df aic " v-else>
			<view @click.stop="minus">
				<nmr-icon name="jianshao-21" :size="size" :color="inputVal <= min?'#999999':'#666666'"></nmr-icon>
			</view>
			<view class="input-class">
				<!-- {{inputVal}} -->
				<input :disabled="disabledInput"  :cursor-spacing="getCursorSpacing" 
				    v-model="CenterVal" class="u-number-input" @blur="onBlur" @focus="onFocus"
				    type="number" style="font-size: 26rpx;height: 50rpx;width: 70rpx; margin: 0 5rpx;"/>
			</view>
			
			<view @click.stop="plus" >
				<nmr-icon name="jiatianjia-yuankuang" :size="size" color="#47A848"></nmr-icon>
			</view>
		</view>
	</view>
</template>
<script>
	import Decimal from "decimal.js";
export default{
	props: {
		// 预显示的数字
		value: {
			type: Number,
			default: 1
		},
		
		// input的字体大小，单位rpx
		size: {
			type: [Number, String],
			default: 26
		},
		// 最小值
		min: {
			type: Number,
			default: 0
		},
		max: {
			type: Number,
			default: 999
		},
		// 步进值，每次加或减的值
		step: {
			type: Number,
			default: 1
		},
		saleUnit: {
			type: String,
			default: '件'
		},
		startSaleNum: {
			type: Number,
			default: 1
		},
		disabledInput: {
			type: Boolean,
			default: false
		},
		
		
		
	},
	data(){
		return{
			cursorSpacing:100,
			CenterVal:0
		}
	},
	computed: {
		getCursorSpacing() {
			// 先将值转为px单位，再转为数值
			return Number(uni.upx2px(this.cursorSpacing));
		}
	},
	data(){
		return{
			inputVal:0,
			CenterVal:0
		}
	},
	watch:{
		value: {
			immediate: true,
			handler(e) {
				this.inputVal = e
			},
		
		},
		inputVal: {
			immediate: true,
			handler(e) {
				this.CenterVal = e
			},
		
		}
	},
	methods:{
		// 处理用户手动输入的情况
		onBlur(event) {
			console.log('123213')
			let val = 0;
			let value = event.detail.value;
			// 如果为非0-9数字组成，或者其第一位数值为0，直接让其等于min值
			// 这里不直接判断是否正整数，是因为用户传递的props min值可能为0
			if (!/(^\d+$)/.test(value) || value[0] == 0) val = this.min;
			val = +value;
			if (val > this.max) {
				val = this.max;
			} else if (val < this.min) {
				val = this.min;
			}
			this.$nextTick(() => {
				this.inputVal = val;
				this.change()
			})
		},
		plus(){
			if (this.inputVal >= this.max) {
				this.$u.toast('单品最大可选'+this.max+'件')
				return;
			}
			if(this.inputVal<this.startSaleNum){
				 this.inputVal= this.startSaleNum
			}else{
				 this.inputVal= new Decimal(this.inputVal).add(new Decimal(this.step))
			}
			this.change()
		},
		minus(){
			if(this.inputVal<=this.min)return
			if (this.inputVal <= this.min ) {
				return;
			}
			if(this.inputVal<=this.startSaleNum){
				 this.inputVal= 0
			}else{
				 this.inputVal= new Decimal(this.inputVal).sub(new Decimal(this.step))
			}
			
			this.change()
		},
		change(){
			this.$emit('input',this.inputVal)
			this.$emit('change',this.inputVal)
		}
	}
}
</script>
<style scoped lang="scss">
	.plus-box{
		padding: 7rpx 10rpx;
		font-size: 22rpx;
		color: white;
		background-color: #48A147;
		border-radius: 18rpx;
	}
	.input-class{
		width: 80rpx;
		text-align: center;
	}
</style>